<template>
	<view>
		<view class="thumb-box">
			<image src="/static/images1/index/goods1.png" style="width: 100%;height: 420rpx;border-radius: 12rpx;"></image>
		</view>
		<view class="title-box">
			白羊座
			<text>0dysseus [1730]</text>
		</view>
		<view class="info-box">
			<view class="item">
				{{getStr('starPond.buy.region')}}
				<text>上四星</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.issuePrice')}}
				<text>99</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.currentPrice')}}
				<text>102.76</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.numberChanges')}}
				<text>1</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.growthRate')}}
				<text>3.8%</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.publisher')}}
				<text>孟君</text>
			</view>
			<view class="item">
				{{getStr('starPond.buy.releaseTime')}}
				<text>2024/12112 14:07:27</text>
			</view>
		</view>
		
		<view class="btn-box">
			<u-button customStyle="border-radius:16rpx;height:88rpx;font-weight: 500;font-size: 32px;color: #FFFFFF;" color="linear-gradient(90deg, #30272A 0%, #DAA8B7 100%)" :text="getStr('buy')"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app'
	
	const getStr = (key) => {
		return uni.$t(key)
	}
	const setIsRender = () => {
		isRender.value = false
		setTimeout(()=>{
			isRender.value = true
		},50)
	}
	onShow(()=>{
			setIsRender()
		})
</script>
<style>
	page {
		background: #1C1E23;
	}
</style>
<style lang="scss" scoped>
	.thumb-box{
		padding: 28rpx;
	}
	.title-box{
		padding: 0 28rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.info-box{
		width: calc(100vw - 28rpx - 28rpx);
		margin: 28rpx auto 0;
		background-color: #262930;
		border-radius: 12rpx;
		padding: 0 28rpx;
		box-sizing: border-box;
		
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #FFFFFF50;
			padding: 20rpx 0;
			font-size: 24rpx;
			text{
				color: #ffffff;
			}
		}
	}
	
	.btn-box {
		width: calc(100% - 28rpx - 28rpx);
		margin: 48rpx auto 0;
		position: fixed;
		left: 28rpx;
		bottom: calc( 28rpx + env(safe-area-inset-bottom));
	}
</style>